# Installation Guide

## Prerequisites

- Node.js 18 or higher
- npm (comes with Node.js)
- Google Chrome browser

## Setup Steps

### 1. Install Dependencies

```bash
npm install
```

### 2. Build the Extension

```bash
npm run build
```

This will:
- Build all React components using Vite
- Copy data files to `dist/data/`
- Copy icons to `dist/icons/`
- Generate optimized production bundles

### 3. Load Extension in Chrome

1. Open Chrome and navigate to `chrome://extensions/`
2. Enable "Developer mode" (toggle in top right)
3. Click "Load unpacked"
4. Select the `dist` folder from this project

### 4. Verify Installation

- Click the extension icon in Chrome toolbar
- You should see the popup interface
- Open a new tab to see the dashboard
- Check that all features are working

## Development Mode

For development with hot module replacement:

```bash
npm run dev
```

Note: For Chrome extension development, you may need to:
- Use a Chrome extension reloader
- Manually reload the extension after changes
- Or use a development build process

## Troubleshooting

### Extension not loading
- Make sure you selected the `dist` folder, not the root folder
- Check that `manifest.json` exists in `dist/`
- Verify all required files are present

### Build errors
- Run `npm install` again to ensure dependencies are installed
- Check Node.js version: `node --version` (should be 18+)
- Clear `node_modules` and reinstall: `rm -rf node_modules && npm install`

### Missing icons
- Ensure `icons/` folder exists in project root
- Icons should be copied to `dist/icons/` after build
- Check `scripts/copy-assets.js` is running

### History not loading
- Grant history permission in Chrome extension settings
- Check that `history` permission is in `manifest.json`
- Reload the extension after granting permissions

## File Structure After Build

```
dist/
├── popup.html
├── newtab.html
├── breathing.html
├── longevity-history.html
├── background.js
├── manifest.json
├── assets/
│   ├── *.js (React bundles)
│   └── *.css (styles)
├── data/
│   ├── longevity-content.js
│   └── default-reminders.js
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png
```

